<template>
	<view id="libaryPage">
		<view class="header">
			<view class="search-wrapper">
				<input type="text" class="srh-inp" placeholder="请输入产品名称"/>
				<image src="../../static/img/search.png" class="srh-ico" mode="aspectFill" @click.native="toSearch"></image>
			</view>
			<view class="header-img">
				<image src="../../static/img/sister.png" mode="aspectFill" class="sister-ico"></image>
			</view>
		</view>
		<view class="main">
			<prod-aside @normalChosed="normalChosed" @vTypesChosed="vTypesChosed" @setChose="setChose" :type="type"></prod-aside>
			<view class="main-con">
				<prod-section></prod-section>
				<view class="main-list">
					<view class="main-item" v-for="item in list" :key="item" @click="toDetail">
						<image src="../../static/img/cart-img.png" mode="aspectFill" class="main-pic"></image>
						<view class="main-box">
							<view class="main-name">
								A580进口高速防滑...
							</view>
							<view class="main-row">
								尺寸：4210(mm)
							</view>
							<view class="main-row">
								材质：橡胶
							</view>
							<view class="main-row">
								样式：三角带
							</view>
							<view class="price">
								<text class="unit">￥</text>
								299.00
							</view>
							<image class="pos-ico type-img" src="../../static/img/pru-cart.png" mode="aspectFill" v-if="showCart" key="cart" @click.stop="useJoin"></image>
							<image class="pos-ico ding-img" src="../../static/img/ding.png" mode="aspectFill" v-else key="ding"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="showCustom" class="cus-modal">
			<custom @beforeClose="beforeClose" @next="cusNext"></custom>
		</view>
		<cart-modal v-if="showCartModal" @click="closeCartModal" @close="showCartModal=false"  :collected="collected" @telClick="telClick" @join="join" @buy="buy" @collectClick="collectClick"></cart-modal>
		<tel-modal :visable="modalVisable" @close="modalVisable=false"></tel-modal>
		<join v-if="showJoin" @close="joinClose" @join="joinClicked"></join>
		<buy v-if="showBuy" @close="buyClose" @buy="buyClicked"></buy>
		<operationModal :url="url" :txt="txt" :visable="showOpe" @close="opeModalClose"></operationModal>
	</view>
</template>

<script>
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	import prodAside from "@/components/prod-aside/prod-aside.vue"
	import prodSection from "@/components/prod-section/prod-section.vue"
	import custom from "@/components/custom/custom.vue"
	import cartModal from "@/components/cart-modal/cart-modal.vue"
	import telModal from "@/components/tel-modal/tel-modal.vue"
	import operationModal from "@/components/operation-modal/operation-modal.vue"
	import join from "@/components/join/join.vue"
	import buy from "@/components/buy/buy.vue"
	
	export default {
		components: {uniNumberBox,prodAside,prodSection,custom,cartModal,telModal,operationModal,join,buy},
		data() {
			return {
				type: 'n',
				list: 9,
				showCart: true,
				showCustom: false,
				showCartModal: false,
				modalVisable: false,
				showJoin: false,
				showOpe: false,
				showBuy: false,
				url: '../../static/img/success.png',
				txt: '添加购物车成功',
				collected: false
			}
		},
		methods: {
			telClick() {
				this.modalVisable = true
			},
			collectClick() {
				this.collected = !this.collected
				this.showOpe = true
				this.url = '../../static/img/success.png'
				this.txt = (this.collected ? '' : '取消') + '收藏成功'
			},
			
			useJoin() {
				this.showJoin = true
			},
			
			join() {
				this.showJoin = true
			},
			joinClose() {
				this.showJoin = false
			},
			joinClicked() {
				this.showOpe = true
			},
			buy() {
				this.showBuy = true
			},
			buyClose() {
				this.showBuy = false
			},
			buyClicked() {
				uni.navigateTo({
					url: '../order/order',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			opeModalClose() {
				this.showOpe = false
			},
			
			
			
			
			
			
			
			
			
			
			normalChosed(e) {
				this.showCart = true
			},
			vTypesChosed(e) {
				this.showCart = true
			},
			setChose() {
				uni.navigateTo({
					url: '../custom/custom',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
				
				// this.showCart = false
				// this.showCustom = true
			},
			beforeClose() {
				this.showCart = true
				this.showCustom = false
			},
			cusNext() {
				this.showCartModal = true 
			},
			closeCartModal() {
				this.showCartModal = false
			},
			toDetail() {
				uni.navigateTo({
					url: '../prodDetail/prodDetail',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toSearch() {
				uni.navigateTo({
					url: '../products/products'
				})
			}
		},
		onLoad({type}) {
			console.log(type)
			this.type = type
		}
	}
</script>

<style>
#libaryPage {
	background: #F5F5F5;
}
.header {
	height: 120upx;
	background: #FFFFFF;
	position: sticky;
	top: 0;
	left: 0;
	width: 750upx;
	display: flex;
}
.header-img {
	flex: 1 108upx 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 108upx;
}
.prod-ico {
	width: 44upx;
	height: 42upx;
}
.search-wrapper {
	width: 584upx;
	flex: 7 584upx 0;
	height:74upx;
	background:rgba(255,255,255,1);
	border:3upx solid rgba(234,10,42,1);
	border-radius:37upx;
	position: relative;
	margin: 24upx 0 0 55upx;
	display: flex;
	align-items: center;
}
.srh-inp {
	width: 400upx;
	padding-left: 30upx;
	line-height: 74upx;
}
.srh-ico {
	width: 32upx;
	height: 36upx;
	position: absolute;
	top: 19upx;
	right: 41upx;
}
.sister-ico {
	width: 57upx;
	height: 48upx;
}
.main {
	position: absolute;
	top: 120upx;
	left: 0;
	bottom: 0;
	overflow-y: hidden;
	width: 750upx;
}
.main-con {
	background: #F5F5F5;
	position: absolute;
	top: 0;
	left: 170upx;
	right: 0;
	bottom: -120upx;
	padding-top: 15upx;
	
}
.main-con:after {
	content: '';
	height: 120upx;
}
.main-list {
	margin-left: 10upx;
	max-height: 76%;
	overflow-y: auto;
}

.main-item {
	display: flex;
	margin-top: 10upx;
	background: #FFFFFF;
}
.main-pic {
	width: 218upx;
	height: 218upx;
	flex: 5 218upx 0;
}
.main-box {
	flex: 6 265upx 0;
	position: relative;
	padding-left: 33upx;
}
.main-name {
	width:276upx;
	font-size:30upx;
	font-weight:500;
	color:rgba(51,51,51,1);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 22upx 0 0 0;
}
.main-row {
	font-size: 20upx;
	margin-top: 10upx;
	color: #666666;
}
.price {
	margin-top: 10upx;
}
.pos-ico {
	position: absolute;
	right: 24upx;
	bottom: 31upx;
}
.type-img {
	width: 49upx;
	height: 47upx;
}
.ding-img {
	width: 64upx;
	height: 64upx;
	bottom: 16upx;
}

.cus-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,.6);
}
</style>
